<template>
  <div class="login">
    <div class="logo">
      <img src="~@/assets/images/logo-3.png" alt="" />
      <img src="~@/assets/images/logo-5.png" alt="" />
    </div>
    <div class="login-box">
      <div class="form">
        <div class="form-header">
          <img src="~@/assets/images/logo-6.png" alt="" />
          <h2>企业综合服务门户</h2>
        </div>
        <div class="input">
          <a-input v-model="username" placeholder="请输入手机号" allow-clear @keydown.enter="login">
            <span slot="prefix" class="iconfont iconshouji input-prefix"></span>
          </a-input>
        </div>
        <div class="input" v-show="loginType === $enums.LoginType.pwd" @keydown.enter="login">
          <a-input-password v-model="password" placeholder="请输入密码" allow-clear autocomplete>
            <span slot="prefix" class="iconfont iconmima input-prefix"></span>
          </a-input-password>
        </div>

        <div class="input" v-show="loginType === $enums.LoginType.code" @keydown.enter="login">
          <c-send-code :phonenumber="username" :is-login="true" v-model="code" @afterSend="getCodeInfo" :inputPrefix="true"></c-send-code>
        </div>

        <div class="remember-reset">
          <div class="remember">
            <!-- <span class="iconfont iconcheckbox"></span>
            记住密码 -->
          </div>
          <!--<a href="javascript:;" class="reset">重置密码</a>-->
          <!-- <a href="../openIE.exe" target="_blank" download="openIE.exe" class="reg">请点击下载插件</a> -->
        </div>

        <div class="btn-div" @click="login">登录</div>

        <div class="login-type" @click="changeLoginType">
          <div class="code" v-show="loginType === $enums.LoginType.pwd">
            <span class="iconfont iconshouji1"></span>
            <span>手机验证码登录</span>
          </div>
          <div class="pwd" v-show="loginType === $enums.LoginType.code">
            <span class="iconfont iconzhanghao"></span>
            <span>账号密码登录</span>
          </div>
        </div>

        <!-- <a-input-password v-model="password"></a-input-password> -->
        <!-- <a-button type="primary" @click="login">登录</a-button> -->
      </div>
    </div>
    <div class="copyright">
      <p>上海同济工程咨询有限公司 Shanghai TongJi Engineering Consulting Co, Ltd.版权所有 沪ICP备14042919号-1</p>
      <p>沪公网安备 31011002000256号</p>
    </div>
  </div>
</template>

<script lang="ts">
import Base from "@/controllers/base.ts";
import { Component } from "vue-property-decorator";
import { Input } from "ant-design-vue";
import CSendCode from "@/components/CSendCode/index.vue";

@Component({
  name: "Login",
  components: {
    CSendCode,
    AInput: Input,
    AInputPassword: Input.Password
  }
})
export default class Login extends Base {
  private username = "";
  private password = "";
  private uuid = "";
  private code = "";
  private loginType = this.$enums.LoginType.code;

  private created() {
    // 清楚后台管理系统的cookie
    this.$tools.delCookie("Admin-Token");

    this.setUser();
    sessionStorage.clear();
    localStorage.clear();
    // const errmsg: string = (this.$route.query.errmsg ? this.$route.query.errmsg : "") as string;
    // if (errmsg) {
    //   this.$message.error(decodeURIComponent(errmsg));
    //   const query: any = { ...this.$route.query };
    //   delete query.errmsg;
    //   query.t = new Date().getTime().toString();
    //   this.$nextTick(() => {
    //     this.$router.replace({ name: "Login", query: query });
    //   });
    // }
    // this._logout();
  }

  /**
   * 账号密码登录前验证
   */
  private beforePwd() {
    this.$message.destroy();
    if (!this.username) {
      this.$message.error("请输入账号");
      return false;
    }

    if (!this.password) {
      this.$message.error("请输入密码");
      return false;
    }

    return true;
  }

  /**
   * 验证码登录前验证
   */
  private beforeCode() {
    this.$message.destroy();
    if (!this.username) {
      this.$message.error("请输入手机号");
      return false;
    }

    if (!this.$tools.checkPhone(this.username)) {
      this.$message.error("您的手机号码格式不正确");
      return false;
    }

    if (!this.uuid) {
      this.$message.error("请先发送验证码");
      return false;
    }

    if (!this.code) {
      this.$message.error("请输入验证码");
      return false;
    }

    return true;
  }

  /**
   * 密码登录
   */
  private async byPwd() {
    if (this.beforePwd()) {
      const res = await this.$api.Login({
        username: this.username,
        password: this.password,
        token: false
      });
      return Promise.resolve(res);
    } else {
      return Promise.resolve(false);
    }
  }

  /**
   * 验证码登录
   */
  private async byCode() {
    if (this.beforeCode()) {
      const res = await this.$api.LoginByCode({
        phonenumber: this.username,
        code: this.code,
        uuid: this.uuid,
        token: false
      });
      return Promise.resolve(res);
    } else {
      return Promise.resolve(false);
    }
  }

  /**
   * 登录事件入口
   */
  private async login() {
    let res: any = null;
    if (this.loginType === this.$enums.LoginType.pwd) {
      res = await this.byPwd();
    } else {
      res = await this.byCode();
    }

    if (res && res.code === 200) {
      localStorage.setItem("token", res.token);
      await this.updateUser(true);
      this.$router.replace({ name: "Home" });
    }
  }

  /**
   * 发送完短信验证码后的回调函数，用来获取接口返回的相关数据
   */
  private getCodeInfo(obj: any) {
    this.uuid = obj.uuid;
  }

  private changeLoginType() {
    if (this.loginType === this.$enums.LoginType.pwd) {
      this.loginType = this.$enums.LoginType.code;
    } else {
      this.loginType = this.$enums.LoginType.pwd;
    }

    // this.username = "";
    this.password = "";
    this.code = "";
    this.uuid = "";
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.login {
  height: 100vh;
  background: url("~@/assets/images/bg-24.jpg") center center no-repeat;
  background-size: cover;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;

  .form-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 12px;
    img {
      height: 54px;
      margin-right: 12px;
    }
  }

  .login-box {
    margin-right: 260px;
    width: 432px;
    // height: 410px;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }

  .form {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.75);
    padding: 30px 36px 40px;

    h2 {
      font-weight: 500;
      color: #005bac;
      text-align: center;
      font-size: 22px;
      margin-bottom: 0;
    }
  }

  .input {
    overflow: hidden;
    display: flex;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.76);
    border-radius: 2px;
    margin-top: 20px;

    /deep/.input-prefix {
      font-size: 20px;
      color: #8c8c8c;
    }

    /deep/.ant-input {
      font-size: 16px;
      height: 100%;
      border: 0;
      padding-left: 40px;
    }
    /deep/.ant-btn-primary {
      background: #005bac;
    }
  }

  .logo {
    position: absolute;
    top: 24px;
    left: 80px;
    right: 80px;
    display: flex;
    align-items: center;

    img {
      height: 54px;
      &:last-child {
        margin-left: 16px;
        height: 50px;
      }
    }
  }
}
.btn-div {
  height: 50px;
  line-height: 50px;
  background: #005bac;
  border-radius: 2px;
  color: white;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  margin-top: 32px;
  &:active {
    opacity: 0.8;
  }
}

.login-type {
  position: relative;
  color: #005bac;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  .iconfont {
    font-size: 18px;
  }
  & > div {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 8px;
    cursor: pointer;
  }
  &::before {
    content: "";
    position: absolute;
    height: 2px;
    left: 0;
    right: 70%;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #005bac);
  }

  &::after {
    content: "";
    position: absolute;
    height: 2px;
    left: 70%;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #005bac, rgba(255, 255, 255, 0));
  }
  .pwd {
    letter-spacing: 2px;
  }
}

.copyright {
  letter-spacing: 1px;
  color: white;
  position: absolute;
  text-align: center;
  font-weight: 400;
  bottom: 50px;
  left: 0;
  right: 0;
}

.remember-reset {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
}

.reg {
  color: #005bac;
}

.reset {
  color: #8c8c8c;
}
</style>
